<template>
    <div class="page">
        <wl-content-top :line="false">
            <template slot="header">
                <slot>
                    <!--                    字典类型：-->
                    <!--                    <Select v-model="dicttype" style="width:200px" ref="new"  @on-change="getList">-->
                    <!--                        <Option v-for="item in List" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
                    <!--                    </Select>-->
                    <Form  :label-width="80">
                        <Row type="flex" justify="start" class="code-row-bg">
                            <Col span="4">
                                <FormItem label="字典类型">
                                    <Select v-model="dicttype" style="width:200px" ref="new"  @on-change="getList">
                                        <Option v-for="item in List" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </slot>
            </template>
            <template slot="body">
                <Row class="wl-content">
                    <Col span="24" >
                        <Table border ref="selection" :loading="loading" :columns="tableOptions.tableHead"
                               :data="tableOptions.tableData">
                        </Table>
                    </Col>
                </Row>
                <Row type="flex" justify="space-between" class="wl-footer">
                    <Col span="14">

                    </Col>
                    <Col span="10">
                        <Page :total="pageOptions.totalRecord" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
                    </Col>

                </Row>
            </template>
        </wl-content-top>
    </div>
</template>

<script>
import WlContentTop from '../../../../components/wl-content-top/wl-content-top'
import { dict } from '../../../../api/platform'
export default {
  components: {
    WlContentTop
  },
  data () {
    return {
      tableOptions: {
        tableHead: [
          {
            title: 'ID',
            align: 'center',
            key: 'id'
          },
          {
            title: '名称',
            align: 'center',
            key: 'name'
          },
          {
            title: '备注',
            align: 'center',
            key: 'note'
          }
        ],
        tableData: []
      },
      loading: false,
      dicttype: '1',
      param: {
        page: 1,
        type: 1
      },
      pageOptions: {
        totalRecord: 0
      },
      List: [
        {
          value: '1',
          label: '车辆类型'
        },
        {
          value: '2',
          label: '车辆颜色'
        },
        {
          value: '3',
          label: '报警类型'
        },
        {
          value: '4',
          label: '人员类别'
        },
        {
          value: '5',
          label: '危险品货物类型'
        },
        {
          value: '6',
          label: '经营区域'
        },
        {
          value: '7',
          label: '班线类型'
        },
        {
          value: '8',
          label: '运输行业编码'
        }
      ]
    }
  },

  mounted () {
    this.getmsg()
  },
  methods: {
    getmsg () {
      this.loading = true
      dict(this.param).then(ret => {
        this.loading = false
        this.tableOptions.tableData = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    getList (e) {
      this.loading = true
      this.param.type = e
      this.getmsg()
      // dict({ type: e }).then(ret => {
      //   this.loading = false
      //   this.tableOptions.tableData = ret.data.results
      //   this.pageOptions.totalRecord = ret.data.count
      // })
    },
    pageChange (e) {
      this.param.page = e
      this.getList()
    },

    pageSizeChange (e) {
      this.param.page_size = e
      this.param.page = 1
      this.getList()
    },
    select_info (e) {
      sel_vehicle({ keyword: e, unit_id: 1 }).then(ret => {
        this.columns4.columns4Bodey = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    }
  }

}
</script>

<style scoped lang="less">
    .page{
        height: 100%;
    }
    .wl-content{
        margin-bottom: 10px;
        &-group{
            margin: 10px;
        }
        &-button{
            margin-right: 10px;
        }
    }
</style>
